<!-- 帖子详情 -->
<template>
  <div class="app">
    <head-nav-bar>
      <template #left>
        <div class="head_name" @click="back">
          <img
            class="return"
            src="https://www.hualigs.cn/image/60408d2367fba.jpg"
            alt=""
          />
          <span class="return_">返回</span>
        </div>
      </template>
      <template #center>
        <div class="head_name2">帖子详情</div>
      </template>
    </head-nav-bar>

    <div class="posts-body">
      <div class="post-title">
        {{ detail.title }}
      </div>
      <div class="post-body">
        <div class="post-owner">
          <img class="avatar" :src="userInfo.avatar_url" />

          <div class="introduce">
            <span class="name">
              {{ userInfo.username }}
            </span>
            <span class="owner">楼主</span>
            <span class="time">
              {{ (detail.time * 1) | dateFor }}
            </span>
          </div>
        </div>

        <div class="post-content">
          {{ detail.content }}
        </div>

        <div class="reply-container">
          <div class="reply-header">
            <span class="replay-header-post">
              回帖 (
              <span class="replay-header-post-number">
                {{ commont === undefined ? 0 : commont.length }}
              </span>
              )
            </span>
            <div class="line">
              <div class="active"></div>
            </div>
          </div>

          <div class="reply-item" v-for="(com, index) in commont" :key="index">
            <img class="reply-avatar" :src="com.avatar_url" />
            <div class="reply-introduce">
              <p class="name">{{ com.realname }}</p>
              <span class="time"> {{ (detail.time * 1) | dateFor }}</span>
              <p class="reply-content">
                {{ com.content }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="posts-footer">
      <div class="left-img">
        <img src="../assets/reply-img.png" />
        <img src="../assets/reply-emj.png" />
      </div>
      <div class="right-input">
        <input
          ref="FormContent"
          class="edit-content"
          placeholder="请编辑你要回帖的内容"
        />
        <img src="../assets/reply-edit.png" />
      </div>
      <div class="sind" @click="createComm">发送</div>
    </div>
  </div>
</template>

<script>
import HeadNavBar from "./HeadNavBar";
import http from "../API/http.js";
export default {
  name: "PostDetail",
  created() {
    this.init();
  },
  props: {},
  data() {
    return {
      detail: {},
      userInfo: {},
      commont: []
    };
  },
  methods: {
    async init() {
      let uid = this.$route.params.uid;
      let blogId = this.$route.params.bid;
      // console.log(blogId);
      let id = uid;
      // 获取文章详情
      const { data } = await http._detail({ uid, blogId });
      // 获取用户信息
      const { data: info } = await http._user({ id });
      // 获取评论
      const { data: comm } = await http._getCommont({
        blogId
      });
      this.detail = data;
      this.userInfo = info.data;
      this.commont = comm.CommentList;
    },
    back() {
      this.$router.go(-1); //返回上一层
    },

    // 创建评论
    async createComm() {
      let uid = window.localStorage.ID;
      console.log("id", uid);
      let blogUserId = this.detail.uid;
      let blogId = this.detail.blogId;
      // 获取用户信息
      const { data: info } = await http._user({ id: uid });
      let realname = info.data.username;
      let avatar_url = info.data.avatar_url;
      let content = this.$refs.FormContent.value;
      console.log(content);
      const { data } = await http._creatComment({
        uid,
        blogUserId,
        blogId,
        realname,
        avatar_url,
        content
      });
      // this.$router.go(0);
      this.$refs.FormContent.value = "";
      this.init();
    }
  },
  components: {
    HeadNavBar
  }
};
</script>

<style scoped>
.app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
}

.head_name {
  position: absolute;
  height: 25px;
  width: 60px;
  line-height: 25px;
}
.return {
  position: absolute;
  top: 2px;
  height: 21px;
  width: 21px;
}
.return_ {
  position: absolute;
  top: 0;
  left: 22px;
  height: 25px;
  line-height: 25px;
}
.head_name2 {
  margin: 0 auto;
}

/* 帖子详情 */
.posts-body {
  position: absolute;
  height: 84%;
  width: 100%;
  /* margin-top:14.3%; */
  padding: 1rem;
  font-size: 13px;
  overflow-y: scroll;
}
.posts-body::-webkit-scrollbar {
  width: 0;
}
.post-title {
  font-size: 16px;
  margin-left: 5px;
  text-align: center;
}

.post-owner {
  height: 3.22rem;
  position: relative;
  padding: 0.2rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}
.post-owner .avatar {
  height: 100%;
}
.introduce {
  height: 100%;
  display: inline-block;
  margin-left: 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
}

.introduce .name {
  font-size: 16px;
  font-weight: bold;
  color: #14b4ff;
}
.introduce .owner {
  display: inline-block;
  width: 2.2rem;
  text-align: center;
  background: #cc9900;
  color: white;
  border-radius: 0.125rem;
  margin-left: 0.5rem;
  font-size: 13px;
  line-height: 1rem;
}
.introduce .time {
  display: block;
  margin-top: 0.6rem;
  color: #bcbcbc;
  position: absolute;
  left: 0px;
  top: 24px;
}
.post-content {
  margin-top: 0.4rem;
  line-height: 1rem;
  padding-left: 12px;
  color: #666666;
}

/*  帖子回复：标题区 */
.reply-container {
  width: 100%;
  margin-top: 2rem;
  font-size: 14px;
}
.reply-header {
  font-size: 16px;
}
.reply-header .line {
  border: 1px solid #cccccc;
  height: 0;
}
.reply-header .line .active {
  width: 3.4rem;
  height: 0;
  border: 1px solid #00aeff;
}

.reply-item {
  position: relative;
  margin-top: 35px;
}
.reply-item .reply-avatar {
  height: 45px;
}

.reply-introduce {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  left: 60px;
  top: 0px;
}

.reply-introduce p {
  margin: 0px;
}

.reply-item .name {
  font-size: 16px;
  font-weight: bold;
  color: #14b4ff;
}
.reply-item .time {
  display: inline-block;
  color: #bcbcbc;
  margin-top: 0px;
}
.reply-item .reply-content {
  font-size: 16px;
}

/* 帖子详情：footer */
.posts-footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 8%;
  background: #e4e4e4;
  display: flex;
  align-items: center;
}
.posts-footer .left-img {
  position: absolute;
  display: inline-block;
  width: 30%;
  /* float: left; */
  height: 70%;
  /* positoin: relative; */
  top: 15%;
}
.left-img img {
  width: 33%;
  float: left;
  margin-left: 13%;
}
.posts-footer .right-input {
  display: inline-block;
  width: 58%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 30%;
}
.right-input .edit-content {
  display: inline-block;
  height: 100%;
  width: 98%;
  text-indent: 0.5rem;
  font-size: 16px;
  outline: none;
  border: 1px solid #d7d7d7;
  margin-left: 1%;
}
.right-input img {
  display: inline-block;
  transform: scale(1.3);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-200%, -50%);
  align-items: center;
}

.sind {
  position: absolute;
  right: 10px;
}
</style>
